<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>自定义标签添加</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
body, div, dl, dt, dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
body{background: #f3f3f3;font-family: Microsoft YaHei;position: relative}
input{padding: 0;margin: 0;}
.panel{width:800px;height:400px;margin: 0 auto;overflow: hidden;position: absolute;left: 50%;top:50%;margin-left: -400px;margin-top: 200px;}
.panel_tit{background: #282828;color: #fff;float: left;width: 70px;height: 100%;text-align: center; }
.panel_tit span.num{background: #bf1e2e;height: 70px;width: 100%;display: block;text-align: center;line-height: 70px;font-size: 30px;}
.panel_tit span.title{padding-top: 23px;display: inline-block}
.panel_body{background: url(images/logo.jpg) right bottom no-repeat #fff;height: 270px;width: 600px;padding: 65px;float: left;font-size: 14px;}
.panel_body tr{padding-bottom: 30px;display: -webkit-box;}
.panel_body td.td_tit{width: 85px;vertical-align: top;}
.panel_body td .sel,.panel_body td .rec{padding: 5px 8px;display: inline-block;text-decoration: none;}
.panel_body td .sel{background: #28282a;color: #fff; margin-right:5px;margin-bottom: 5px;}
.panel_body td .sel i,.panel_body td .rec i{font-style: normal;padding-left: 5px;}
.panel_body td .rec{background: #ececec;color: #2b2b2b;}
.panel_body td .rec span{background: url(images/reduction.png) center right no-repeat #ececec;padding-right: 20px;color: #2b2b2b;}
.panel_body td .add{background: #28282a;color: #fff;}
.panel_body td .add span{background: url(images/add.jpg) center right no-repeat #28282a;padding-right: 20px;color: #fff;}
.panel_body td input[type=text]{width: 375px;height: 25px;border:1px #28282a solid;padding: 0 5px;}
.panel_body td input[type=submit]{width: 72px;height: 27px;background: #28282a;color: #fff;border:1px #28282a solid;}
</style>
</head>
<body>
    <div class="panel">
        <div class="panel_tit">
            <span class="num">2</span><span class="title">自<br>定<br>义<br>标<br>签<br>添<br>加</span>
        </div>
        <div class="panel_body">
            <table>
                <tbody>
                    <tr>
                        <td class="td_tit">我的标签：</td>
                        <td class="my_tags"><a href="javascript:;" class="sel"> <span>lol大神补刀王</span> <i class="close">×</i></a></td>
                    </tr>
                    <tr>
                        <td class="td_tit">添加标签：</td>
                        <td><input type="text" placeholder="输入标签" id="input_tags" value=""> <input type="submit" id="add_tags"></td>
                    </tr>
                    <tr>
                        <td class="td_tit">推荐标签：</td>
                        <td class="rec_tags"><a href="javascript:;" class="rec add"><span>网站建设</span></a> <a href="javascript:;" class="rec add"><span>品牌官网建设</span></a> <a href="javascript:;" class="rec del"><span>lol大神补刀王</span></a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script src="jquery2.1.1.min.js"></script>
    <script>
        $(document).ready(function(){
            var my_tags = $('.my_tags');
            //检测是否重复添加标签
            var isrepeat = function(tag,len){
                for(a=0;a<len;a++){
                        if(tag == my_tags.find('.sel span').eq(a).text()){
                            alert('不能添加重复的标签！');
                            return true;
                        }
                    }
            }
            //删除标签
            my_tags.on('click','i',function(){
                var rec_len = $('.rec_tags .rec').length;
                
                for(a=0;a<rec_len;a++){
                    if($(this).parent().find('span').text()==$('.rec_tags .rec').eq(a).text()){
                        $('.rec_tags .rec').eq(a).removeClass('del');
                        $('.rec_tags .rec').eq(a).addClass('add');
                    }
                }
                
                $(this).parents('.my_tags .sel').remove();
            })

            //文本框添加标签
            $('#add_tags').click(function(){
                var my_len = $('.my_tags .sel').length;
                var add_tags = $('#input_tags').val();
                if(my_len<4){
                    if(!isrepeat(add_tags,my_len)){
                        my_tags.append('<a href="javascript:;" class="sel"> <span>'+add_tags+'</span> <i class="close">×</i></a>'); 
                    }
                }
                else{
                    alert('标签不能超出4个！');
                }
            })

            //推荐标签功能
            $('.rec_tags a').click(function(){
                if($(this).hasClass('add')){
                    
                    var rec_tags = $(this).text();
                    var my_len = $('.my_tags .sel').length;
                    if(my_len<4){
                        if(!isrepeat(rec_tags,my_len)){
                            my_tags.append('<a href="javascript:;" class="sel"> <span>'+rec_tags+'</span> <i class="close">×</i></a>'); 
                        }
                    }
                    else{
                        alert('标签不能超出4个！');
                        return;
                    }
                    $(this).removeClass('add');
                    $(this).addClass('del');
                }
                else{
                    $(this).removeClass('del');
                    $(this).addClass('add');
                    var rec_tags = $(this).text();
                    var my_len = $('.my_tags .sel').length;
                    for(a=0;a<my_len;a++){
                        if(rec_tags == my_tags.find('.sel span').eq(a).text()){
                            my_tags.find('.sel').eq(a).remove();
                        }
                    }
                }
            })
            

        });
    </script>
</body>
</html>